/*
 * @Description: 基本信息配置
 * @Author: Zzt
 * @Date: 2022-11-05 16:53:23
 * @LastEditTime: 2023-02-15 20:08:28
 */
import { fetchATListByFondId } from '@/api/archivesType';
import { fetchFondsListByUnitId } from '@/api/fonds';
import { IArchiveType } from '@/interfaces/archiveType';
import { IFond } from '@/interfaces/fond';
import { appState } from '@/store/mobx';
import { QUERY_METADATA_ALL } from '@/view/system/Metadata/constants';
import { Form, Input, Select, Space } from 'antd';
import { useEffect, useState } from 'react';
import { useMappingRelationContext } from '../../contexts/MappingRelationContext';

const { Option } = Select;

const BaseTAT = (props: any) => {
  const { form, data, title } = props;
  const { selectAT, setTargetItems, setFileList } = useMappingRelationContext();

  // 全宗列表
  const [fondsList, setFondsList] = useState([]);
  // 档案类型列表
  const [ATList, setATList] = useState<IArchiveType[]>([]);
  // 加载时获取全宗列表，获取成功后默认选中第一条并把第一条返回出去

  useEffect(() => {
    const selectUnit = appState.unitId;
    if (selectUnit) {
      fetchFondsListByUnitId(selectUnit).then((res) => {
        const _fondList: IFond[] = res.data;
        setFondsList(_fondList);
        console.log('1111', _fondList[0].id);
        if (data?.id) {
          form.setFieldsValue({ targetFondsId: data.targetFondsId });
        } else {
          form.setFieldsValue({ targetFondsId: _fondList[0].id });
        }
      });
    }
  }, [appState.unitId]);
  const targetArchiveTypeId = Form.useWatch('targetFondsId', form);
  // 切换全宗自动加载档案类型
  useEffect(() => {
    if (targetArchiveTypeId) {
      fetchATListByFondId(targetArchiveTypeId).then((res) => {
        const _atList: IArchiveType[] = res.data;
        console.log(_atList);
        setATList(_atList);
        if (data?.id) {
          form.setFieldsValue({ targetArchiveTypeId: data.targetArchiveTypeId });
        } else {
          form.setFieldsValue({ targetArchiveTypeId: _atList[0]?.id });
        }
      });
    }
  }, [targetArchiveTypeId]);
  const type = Form.useWatch('targetArchiveTypeId', form);
  /* 查找字段值 */
  useEffect(() => {
    if (ATList.length !== 0 && type) {
      const targetType = ATList.find((item) => item.id === type);
      const { atType, atCode, atLevel } = targetType;
      const fieldQuery = {
        metadataFieldType: QUERY_METADATA_ALL,
        coordinate: {
          atType,
          atCode,
          atLevel
        }
      };
      if (JSON.stringify(selectAT) !== '{}') {
        const fileList = {
          metadataFieldType: QUERY_METADATA_ALL,
          coordinate: {
            atType: selectAT.atType,
            atCode: selectAT.atCode,
            atLevel: selectAT.atLevel
          }
        };
        setFileList(fileList);
      }

      setTargetItems(fieldQuery);
    }
  }, [type, ATList]);
  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleFondChange = (val: number) => {
    form.setFieldsValue({ description: val });
  };
  return (
    <>
      <Form.Item label="映射关系名称" name="name" rules={[{ required: true }]}>
        <Input placeholder="请填写映射关系名称"></Input>
      </Form.Item>
      {/* <Form.Item label="全宗" name="description">
        <Select style={{ width: '100%' }} onChange={handleFondChange}>
          {fondsList.map((fond) => (
            <Option key={fond.id} value={fond.id}>
              {fond.fondName}
            </Option>
          ))}
        </Select>
      </Form.Item> */}
      <Space align="baseline">
        源档案类型:{title}与
        <Form.Item name="targetFondsId" rules={[{ required: true }]}>
          <Select
            style={{ width: 190 }}
            options={fondsList.map((item) => ({ label: item.fondName, value: item.id }))}
          />
        </Form.Item>
        <Form.Item name="targetArchiveTypeId">
          <Select
            style={{ width: 100 }}
            options={ATList.map((item) => ({ label: item.atName, value: item.id }))}
          />
        </Form.Item>
        之间的字段映射关系
      </Space>
    </>
  );
};
export default BaseTAT;
